{% schema %}
{
  "name": "Banner",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Rokid AR Joy 2"
    },
    {
      "type": "text",
      "id": "desc",
      "label": "Desc",
      "default": "Stylish Comfort, Exciting Life"
    },
    {
      "type": "text",
      "id": "button_name",
      "label": "Button Name",
      "default": "Buy Now"
    },
    {
      "type": "url",
      "id": "button_href",
      "label": "Button Click URL"
    }, {
      "type": "url",
      "id": "banner_img",
      "label": "Product Banner URL"
    },
    {
      "type": "url",
      "id": "banner_img_xl",
      "label": "Product Banner URL (>1280px)"
    }
  ]
}
{% endschema %}

{%- style -%}
  .container-{{ section.id }} {
    min-height: calc(100vh - 56px);
  }
  .banner-title-{{ section.id }} {
    font-family: HarmonyOS Sans;
    font-size: 36px;
    font-weight: bold;
    line-height: 120%;
    letter-spacing: -1.44px;
    margin-bottom: 8px;
  }
  .banner-desc-{{ section.id }} {
    margin-bottom: 27px;
  }
  .btn-{{ section.id }} {
    height: 48px;
    border-radius: 30px;
    opacity: 1;
    display: flex;
    flex-direction: row;
    padding: 12px 40px;
    gap: 8px;
    color: #fff;
    background: linear-gradient(107deg, #29B3FF 4%, #007AFF 97%)
    , #000000;
    text-align: center;
  }
  .banner-img-{{ section.id }} {
    width: 100%;
  }
  .href-{{ section.id }} {
    text-decoration: none;
  }
  .title-box-{{ section.id }} {
    margin-top: 62px;
  }
{%- endstyle -%}

<div class="container-{{ section.id }} container">
  <div class="row gx-0 bg-white">
    <div class="col col-12 col-xl-6 d-flex flex-column justify-content-center title-box-{{ section.id }} position-relative text-xl-start text-center" style="z-index: 1">
      <div class="banner-title-{{ section.id }} anim">{{ section.settings.title }}</div>
      <h4 class="banner-desc-{{ section.id }} anim">{{ section.settings.desc }}</h4>
      <div class="d-inline-flex justify-content-center justify-content-xl-start">
        <a class="href-{{ section.id }}" href="{{ section.settings.button_href }}">
          <div class="anim btn-{{ section.id }}">{{ section.settings.button_name }}</div>
        </a>
      </div>
    </div>
    <div class="col col-12 col-xl-6 anim d-flex flex-column justify-content-center">
      <img class="banner-img-{{ section.id }} d-xl-none" src="{{ section.settings.banner_img  }}">
      <img class="banner-img-{{ section.id }} d-none d-xl-block" src="{{ section.settings.banner_img_xl  }}">
    </div>
  </div>
</div>

{%- style -%}
@media screen and (min-width: 1280px) {
  .banner-title-{{ section.id }} {
    font-size: 70px;
    margin-bottom: 14px;
  }
  .banner-desc-{{ section.id }} {
    margin-bottom: 34px;
  }
  .title-box-{{ section.id }} {
    margin-top: 0;
    min-height: calc(100vh - 56px);
    height: 100%;
  }
  .banner-img-{{ section.id }} {
      position: absolute;
      width: auto;
      max-height: 120%;
      right: -10.5%;
  }
  .btn-{{ section.id }} {
    display: flex;
    flex-direction: row;
    padding: 12px 40px;
    gap: 8px;
    box-sizing: border-box;
    color: #fff;
    background: linear-gradient(107deg, #29B3FF 4%, #007AFF 97%)
    , #000000;
  }
}
{%- endstyle -%}